<template>
	<view class="container flex-column">
		<view class="banner">
			<!-- <u-swiper :list="list3" indicator indicatorMode="dot" height="186" circular radius="8"></u-swiper> -->
			<uni-swiper-dot :info="list3" :current="current" field="content" :mode="mode">
				<swiper class="swiper-box" @change="change">
					<swiper-item v-for="(item, index) in list3" :key="index">
						<view class="swiper-item"><img :src="item" alt="" /></view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<view class="title">为您推荐</view>
		<view class="water img-box">
			<image src="/static/img/discover/1.png" mode="widthFix"></image>
			<text class="img-text">科学饮水</text>
		</view>
		<view class="img flex">
			<view class="img-left img-box">
				<image src="/static/img/discover/2.png" mode="widthFix"></image>
				<text class="img-text">中医养生</text>
			</view>
			<view class="img-right flex-column">
				<view class="img-top img-box">
					<image src="/static/img/discover/3.png" mode="widthFix"></image>
					<text class="img-text">碳水循环瘦身法</text>
				</view>
				<view class="img-bottom img-box">
					<image src="/static/img/discover/4.png" mode="widthFix"></image>
					<text class="img-text">运动与饮水</text>
				</view>
			</view>
		</view>
		<menu-bottom></menu-bottom>
	</view>
</template>
<script>
export default {
	data() {
		return {
			list3: ['https://cdn.uviewui.com/uview/swiper/swiper3.png', 'https://cdn.uviewui.com/uview/swiper/swiper2.png', 'https://cdn.uviewui.com/uview/swiper/swiper1.png'],
			current: 0,
			mode: 'round'
		}
	},
	methods: {
		change(e) {
			this.current = e.detail.current
		}
	}
}
</script>

<style scoped lang="scss">
page {
	background-color: #f5f5f5;
}

.container {
	width: 100%;
	padding: 24rpx;
	.banner {
		margin-bottom: 40rpx;
	}
	.title {
		font-size: 32rpx;
		color: #000000;
		font-weight: 600;
		line-height: 48rpx;
		margin-bottom: 16rpx;
	}
	.water {
		width: 100%;
		margin-bottom: 24rpx;
		image {
			width: 100%;
		}
	}
	.img-text {
		position: absolute;
		z-index: 9;
		left: 32rpx;
		top: 32rpx;
		font-size: 28rpx;
		color: #000000;
		line-height: 44rpx;
	}
	.img-box {
		position: relative;
		border-radius: 16rpx;
	}
	.img {
		align-items: center;
		justify-content: space-between;
		.img-left {
			width: 340rpx;
			image {
				width: 100%;
			}
		}
		.img-right {
			.img-top {
				width: 338rpx;
				margin-bottom: 24rpx;
				image {
					width: 100%;
				}
			}
			.img-bottom {
				width: 338rpx;
				image {
					width: 100%;
				}
			}
		}
	}
}
</style>
